<!-- 翻牌器配置 -->
<template>
  <div>
    <el-form-item label="精度">
      <avue-input-number v-model="main.activeOption.decimals"/>
    </el-form-item>
    <el-form-item label="列数">
      <avue-input-number v-model="main.activeOption.span"/>
    </el-form-item>
    <el-collapse accordion>
      <el-collapse-item title="边框设置">
        <el-form-item label="X间距">
          <avue-slider v-model="main.activeOption.splitx"/>
        </el-form-item>
        <el-form-item label="Y间距">
          <avue-slider v-model="main.activeOption.splity"/>
        </el-form-item>
        <el-form-item label="边框">
          <avue-radio v-model="main.activeOption.type" :dic="dicOption.border"/>
        </el-form-item>
        <template v-if="main.activeOption.type==='border'">
          <el-form-item label="边框颜色">
            <avue-input-color v-model="main.activeOption.borderColor"/>
          </el-form-item>
          <el-form-item label="边框宽度">
            <avue-input-number v-model="main.activeOption.borderWidth" :max="10"/>
          </el-form-item>
        </template>
        <template v-if="main.activeOption.type==='img'">
          <el-form-item label="背景图片">
            <img v-if="main.activeOption.backgroundImage"
                 :src="main.activeOption.backgroundImage"
                 alt=""
                 width="100%" />
            <el-input v-model="main.activeOption.backgroundImage">
              <div @click="main.handleOpenImg('activeOption.backgroundImage')" slot="append">
                <i class="iconfont icon-img"></i>
              </div>
            </el-input>
          </el-form-item>
        </template>
      </el-collapse-item>
      <el-collapse-item title="内部设置">
        <el-form-item label="字体大小">
          <avue-input-number v-model="main.activeOption.fontSize" :max="200"/>
        </el-form-item>
        <el-form-item label="字体颜色">
          <avue-input-color v-model="main.activeOption.color"/>
        </el-form-item>
        <el-form-item label="文字粗细">
          <avue-select v-model="main.activeOption.fontWeight" :dic="dicOption.fontWeight"/>
        </el-form-item>
        <el-form-item label="对其方式">
          <avue-select v-model="main.activeOption.textAlign" :dic="dicOption.textAlign"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="前缀设置">
        <template v-if="!main.activeOption.row">
          <el-form-item label="对其方式">
            <avue-select v-model="main.activeOption.prefixTextAlign" :dic="dicOption.textAlign"/>
          </el-form-item>
        </template>
        <el-form-item label="X间距">
          <avue-slider v-model="main.activeOption.prefixSplitx"/>
        </el-form-item>
        <el-form-item label="Y间距">
          <avue-slider v-model="main.activeOption.prefixSplity"/>
        </el-form-item>
        <el-form-item label="颜色">
          <avue-input-color v-model="main.activeOption.prefixColor"/>
        </el-form-item>
        <el-form-item label="字体大小">
          <avue-input-number v-model="main.activeOption.prefixFontSize" :max="200"/>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="后缀设置">
        <el-form-item label="X间距">
          <avue-slider v-model="main.activeOption.suffixSplitx"/>
        </el-form-item>
        <el-form-item label="颜色">
          <avue-input-color v-model="main.activeOption.suffixColor"/>
        </el-form-item>
        <el-form-item label="字体大小">
          <avue-input-number v-model="main.activeOption.suffixFontSize" :max="200"/>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption } from '@/option/config'
export default {
  data () {
    return {
      dicOption: dicOption
    }
  },
  inject: ["main"]
}
</script>
